<template>
    <div class="dashboard-container">
      <!--<div class="dashboard-text">name: {{ name }}</div>-->

      <div class="dashboard-b1_bg"></div>
      <div class="dashboard-b1_text">用户</div>
      <div class="dashboard-b1_img"></div>
      <div class="dashboard-b1_num">4</div>
      <router-link to="/userManager/user"><div class="dashboard-b1_check">查看详情 ></div></router-link>


      <div class="dashboard-b2_bg"></div>
      <div class="dashboard-b2_text">话术</div>
      <div class="dashboard-b2_img"></div>
      <div class="dashboard-b2_num">4</div>
      <router-link to="/script/script"><div class="dashboard-b2_check">查看详情 ></div></router-link>

      <div class="dashboard-button">使用说明</div>
      <div class="dashboard-tip"></div>

    </div>
  </template>

  <script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'Dashboard',
    computed: {
      ...mapGetters([
        'name'
      ])
    }
  }
  </script>



  <style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }

    &-b1_bg {
      background-color: white;
      position: absolute;
      width: 330px;
      height: 200px;
      left: 60px;
      top: 40px;
      border-radius: 15px;
    }

    &-b1_text {
      position: absolute;
      top: 75px;
      left: 90px;
      font-family: 'Helvetica Neue','Helvetica';
      font-weight: bold;
      font-size: 25px;
      color: #666666;
    }

    &-b1_img {
      position: absolute;
      left: 85px;
      top: 150px;
      width: 70px;
      height: 56px;
      background-image: url("images/user.png");
      background-size: 70px 56px;
    }

    &-b1_num {
      position: absolute;
      top: 155px;
      left: 170px;
      font-weight: bold;
      font-size: 40px;
    }

    &-b1_check {
      position: absolute;
      top: 185px;
      left: 300px;
      font-family: 'Helvetica Neue','Helvetica';
      font-size: 15px;
      color: #666666;
      cursor: pointer;
    }

    &-b2_bg {
      background-color: white;
      position: absolute;
      width: 330px;
      height: 200px;
      left: 450px;
      top: 40px;
      border-radius: 15px;
    }

    &-b2_text {
      position: absolute;
      top: 75px;
      left: 480px;
      font-family: 'Helvetica Neue','Helvetica';
      font-weight: bold;
      font-size: 25px;
      color: #666666;
    }

    &-b2_img {
        position: absolute;
        left: 480px;
        top: 155px;
        width: 70px;
        height: 56px;
        background-image: url("images/dialogues.png");
        background-size: 70px 56px;
    }

    &-b2_num {
      position: absolute;
      top: 155px;
      left: 560px;
      font-weight: bold;
      font-size: 40px;
    }

    &-b2_check {
      position: absolute;
      top: 185px;
      left: 690px;
      font-family: 'Helvetica Neue','Helvetica';
      font-size: 15px;
      color: #666666;
      cursor: pointer;
    }

    &-button {
      text-align: right;
      position: absolute;
      top: 770px;
      left: 1500px;
      width: 110px;
      font-size: 15px;
      font-weight: bold;
      color: RGB(103,119,239);
      background-color: white;
      border-radius: 5px;
      padding: 10px;
      box-shadow: 3px 3px;
    }

    &-tip {
      position: absolute;
      left: 1515px;
      top: 781px;
      width: 20px;
      height: 16px;
      background-image: url("images/telegram.png");
      background-size: 20px 16px;
    }

    /*&-text {
      font-size: 30px;
      line-height: 46px;
    }*/

  }
  </style>
